<template>
  <a :class="[getClass]" :title="config.text">
    <span class="bgImg" :class="[getSpanClass]" v-on:click="click" v-text="text"></span><i :class="[getIconClass]" @click="show"></i>
    <span v-if="config.showText" :class="[getTextClass]" v-text="config.text"></span>
  </a>
</template>

<script>
  import { mapState, mapGetters } from 'vuex'
  import {Observer} from '../../core/util'
  // 下拉组件
  export default {
    props: ['config'],
    data: function () {
      return {
        text: '',
        disable: false,
        active: false
      };
    },
    created: function () {
      var self = this;
      Observer.register('selectionchange', function (editor) {
        if (self.config.setText) {
          if (self.config.cmd === 'fontsize') {
            Observer.fire('getcurfontsize', function (i, item) {
              self.text = item.name;
            });
            return;
          }
          self.text = editor.queryCommandValue(self.config.cmd).replace(/,.*/, '').replace(/"|(\.\d*)/g, '');
          // 将微软雅黑显示成中文
          if (self.text === 'Microsoft YaHei') self.text = '微软雅黑';$.i18n('toolbar_yahei');
        } else if (self.config.cmd) {
          self.active = editor.queryCommandState(self.config.cmd) === 1;
          self.param = editor.queryCommandValue(self.config.cmd);
        }
      });
    },
    computed: {
        getClass: function () {
          return (this.config.classList || []);
        },
        getSpanClass: function () {
          var classList = [];
          if (this.active) {
            classList.push('active');
          }
          return classList.concat(this.config.spanClass || []);
        },
        getIconClass: function () {
          var classList = [];
          if (this.active) {
            classList.push('active');
          }
          return classList.concat(this.config.iconClass || []);
        },
        getTextClass: function () {
          return (this.config.textClass || []);
        }
    },
    methods: {
      show: function () {
        if (this.disable) return;
        Observer.fire(this.config.showValue);
      },
      click: function () {
        if (this.disable) return;
        if (this.config.param) {
          Observer.fire('execCommand', [this.config.cmd].concat(this.param || this.config.param), this.notFous);
        }
      }
    }
  }
</script>
